<template>
  <div class="page">
    <div style="margin-bottom: 20px">
      <label>用户Id:</label>
      <a-input
        :size="'large'"
        v-model="searchParams.id"
        :style="{ width: '320px', marginRight: '10px' }"
        placeholder="请输入用户的Id"
        allow-clear
      />
      <label>姓名:</label>
      <a-input
        :size="'large'"
        v-model="searchParams.userName"
        :style="{ width: '320px' }"
        placeholder="请输入用户的姓名"
        allow-clear
      />
      <a-button
        type="primary"
        size="large"
        style="margin-left: 20px"
        @click="loadData"
      >
        搜索
        <template #icon>
          <i class="iconfont icon-sousuo" />
        </template>
      </a-button>
      <a-button
        type="primary"
        size="large"
        status="success"
        style="margin-left: 20px"
        @click="getAllData"
      >
        全部
        <template #icon>
          <i class="iconfont icon-sousuo" />
        </template>
      </a-button>
    </div>
    <a-row>
      <a-col>
        <a-table
          @page-change="selectNext($event)"
          :columns="columns"
          :data="dataList"
          size="large"
          @change="handleChange"
          :pagination="pageInfo"
          page-position="bottom"
        >
          <template #userAvatar="{ record }">
            <img
              v-if="record.userAvatar"
              style="height: 50px; border-radius: 5ch"
              :src="record.userAvatar"
            />
            <img
              v-else
              style="height: 50px; border-radius: 5ch"
              src="../../assets/default.png"
            />
          </template>
          <template #createTime="{ record }">
            {{ moment(record.createTime).format("YYYY-MM-DD") }}
          </template>
          <template #operate="{ record }">
            <a-space>
              <a-button type="primary" @click="handleClick(record)">
                查看
              </a-button>
              <a-button @click="banUser(record)" type="primary" status="danger"
                >冻结
              </a-button>
            </a-space>
          </template>

          <template #money="{ record }">
            <span style="font-size: 15px"
              ><i
                class="iconfont icon-jinbi"
                style="color: #ffc53d; font-size: 20px"
              />{{ record.integral }}</span
            >
          </template>
        </a-table>
      </a-col>
    </a-row>
  </div>
  <a-drawer
    :visible="visible"
    @ok="handleOk"
    placement="left"
    width="600px"
    @cancel="handleCancel"
  >
    <template #title
      ><i class="iconfont icon-yonghuguanli" style="color: blue" />
      用户查看
    </template>
    <div>
      <a-descriptions
        style="margin-top: 20px"
        :data="data"
        :size="'large'"
        title="用户信息"
        :column="1"
      />
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import {
  UserControllerService,
  UserQueryRequest,
  UserUpdateRequest,
  UserVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import moment from "moment";
import { useRouter } from "vue-router";
import { useQuestion } from "@/store/question";
import { storeToRefs } from "pinia";
import userRole from "@/access/permissionEnum";
import { useUser } from "@/store/user";

const router = useRouter();
const question = useQuestion();
let { questionId } = storeToRefs(question);
let user = useUser();
let { loginUser } = storeToRefs(user);

const dataList = ref([]);
const searchParams = ref<UserQueryRequest>({
  userName: "",
  pageSize: 8,
  current: 1,
});

const pageInfo = reactive({
  current: 1,
  pageSize: 8,
  total: 0,
});
const loadData = async () => {
  const res = await UserControllerService.listUserVoByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    pageInfo.total = res.data.total;
  } else {
    message.error("加载失败，" + res.message);
  }
};

loadData();

function selectNext(event: any) {
  searchParams.value.current = event;
  pageInfo.current = event;
  loadData();
}

const columns = [
  {
    title: "头像",
    slotName: "userAvatar",
    align: "center",
  },
  {
    title: "用户Id",
    dataIndex: "id",
    align: "center",
  },
  {
    title: "用户名",
    dataIndex: "userName",
    align: "center",
  },
  {
    title: "电话",
    dataIndex: "telephone",
    align: "center",
  },
  {
    title: "创建时间",
    slotName: "createTime",
    align: "center",
  },
  {
    title: "权限",
    dataIndex: "userRole",
    align: "center",
  },
  {
    title: "用户总积分",
    dataIndex: "integral",
    align: "center",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    title: "操作",
    slotName: "operate",
    align: "center",
  },
];
const toQuestionPage = (record: any) => {
  questionId.value = record.id;
  router.push({
    path: "/submit",
  });
};

const getAllData = () => {
  searchParams.value = {
    userName: "",
    pageSize: 8,
    current: 1,
  };
  loadData();
};

const handleChange = (data: any, extra: any) => {
  searchParams.value.sortField = "integral";
  searchParams.value.sortOrder = extra.sorter?.direction;
  loadData();
};

const visible = ref(false);

let userVoInfo = ref<UserVO>();

const data = computed(() => {
  return [
    {
      label: "用户名",
      value: userVoInfo.value?.userName,
    },
    {
      label: "用户Id",
      value: userVoInfo.value?.id,
    },
    {
      label: "用户头像",
      value: userVoInfo.value?.userAvatar,
    },
    {
      label: "用户简介",
      value: userVoInfo.value?.userProfile,
    },
    {
      label: "积分",
      value: userVoInfo.value?.integral,
    },
    {
      label: "电话",
      value: userVoInfo.value?.telephone,
    },
    {
      label: "级别",
      value: userVoInfo.value?.userRole,
    },
  ];
});

const handleClick = (record: UserVO) => {
  visible.value = true;
  userVoInfo.value = record;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const banUser = async (record: UserVO) => {
  if (record.id == loginUser.value.id) {
    message.error("这个账户是你自己,冻结不了哦");
    return;
  }
  if (record.userRole == userRole.ADMIN) {
    message.error("你没有权限冻结管理员的账户");
    return;
  }
  const userUpdateRequest = ref<UserUpdateRequest>({
    id: 0,
    userRole: userRole.USER_BAN as string,
  });
  userUpdateRequest.value.id = record.id;
  userUpdateRequest.value.userRole = userRole.USER_BAN as string;
  const resultUpdate = await UserControllerService.updateUserUsingPost(
    userUpdateRequest.value as UserUpdateRequest
  );
  if (resultUpdate.code == 0 && resultUpdate.data == true) {
    message.success("用户已经被冻结");
    loadData();
  } else {
    message.error("操作异常,该用户无法冻结");
  }
};
</script>

<style scoped>
.page {
  background-color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 1ch;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  min-height: 500px;
}
</style>
